@extends('front.public_layout.layout')


@section('style')
    <link rel="stylesheet" href="{{asset('/front/css/bootstrap4.3.1.min.css')}}">
{{--    <link rel="stylesheet" href="{{asset('/front/css/bootstrap3.3.7.min.css')}}">--}}
    <link rel="stylesheet" href="{{asset('/front/css/wenhua.css')}}">
    <style>

    </style>
@endsection

@section('content')
    <div class="middle-content culture">

        {{--    折叠轮播图--}}
        <div class="collapse-adv">

            @foreach($tourAdv as $tourAdvKey => $tourAdvVal)
                <div class="collapse-item {{ $tourAdvKey == 0 ? 'adv-big' : 'adv-small' }}">
                    <img class="adv-img" src="{{ $tourAdvVal->adv_img_pc_url ? $tourAdvVal->adv_img_pc_url : $tourAdvVal->adv_img_url }}" alt="">
                    <div class="data">
                        <div class="title">{{ $tourAdvVal->region ? '【'.$tourAdvVal->region->region_name.'】' : '' }}{{ $tourAdvVal->adv_name }}</div>

                        <a href="{{ url('article/details/'.$tourAdvVal->obj_id) }}" class="adv-go">
                            <img src="{{ url('/front/img/icon/wenhua_go.png') }}" alt="">
                        </a>
                        <div class="dian">
                            <div class="{{ $tourAdvKey == 0 ? 'active' : '' }}"></div>
                            <div class="{{ $tourAdvKey == 1 ? 'active' : '' }}"></div>
                            <div class="{{ $tourAdvKey == 2 ? 'active' : '' }}"></div>
                        </div>
                    </div>
                </div>

            @endforeach

        </div>

        {{--    轮播图--}}
        <div class="second-adv">

            @foreach($cultureAdv as $cultureAdvKey => $cultureAdvVal)
            <a class="adv-item {{ $cultureAdvKey == 1 ? 'big-item' : '' }}" href="{{ url('article/details/'.$cultureAdvVal->obj_id) }}">
                <div class="adv-img">
                    <img src="{{ $cultureAdvVal->adv_img_pc_url ? $cultureAdvVal->adv_img_pc_url : $cultureAdvVal->adv_img_url }}" alt="">
                </div>

                <div class="adv-info">
                    <div class="adv-title">{{ $tourAdvVal->region ? '【'.$tourAdvVal->region->region_name.'】' : '' }}{{ $cultureAdvVal->adv_name }}</div>
                    <div class="adv-jieshao">{{ $cultureAdvVal->article->content_into }}</div>
                </div>
            </a>
            @endforeach

        </div>
        <div class="article-data">
          <div class="mingsheng" style="width:100%">
                <div class="title">
                    普通话推广
                </div>
            </div>
        </div>
        <div class="second-adv putong">

            

        </div>
        {{--    内容--}}
        <div class="article-data">

            {{--    非遗--}}
            <div class="feiyi">
                <div class="img-title">
                    <img src="{{ url('/front/img/icon/title_feiyi.png') }}" alt="">
                </div>
            </div>

            {{--    名胜古迹--}}
            <div class="mingsheng">
                <div class="title">
                    名胜古迹
                </div>
            </div>

            {{--    历史名人--}}
            <div class="mingren">
                <div class="img-title">
                    <img src="{{ url('/front/img/icon/title_mingren.png') }}" alt="">
                </div>
            </div>

            <div style="width: 100%;">
                <div class="more-btn" onclick="article_more()">查看更多</div>
            </div>
        </div>

    </div>

@endsection


@section('js')
{{--    <script src="{{asset('front/js/bootstrap4.3.1.min.js')}}"></script>--}}
    <script src="{{asset('front/js/bootstrap3.3.7.min.js')}}"></script>
    <script>

        $('.collapse-item').click(function () {
            $('.collapse-adv').find('.collapse-item').attr('class', 'collapse-item adv-small');
            $(this).attr('class', 'collapse-item adv-big');
        });

        var culture_article_url = '{{ url('ajax_category_article_lists') }}';
        var mingsheng_article_url = '{{ url('ajax_category_article_lists') }}';
        var mingren_article_url = '{{ url('ajax_category_article_lists') }}';
        var putong_article_url = '{{ url('ajax_category_article_lists') }}';
        function article_list(categoryid = 0) {
            var article_url = '';
            if (categoryid == 21) article_url = culture_article_url;
            if (categoryid == 22) article_url = mingsheng_article_url;
            if (categoryid == 20) article_url = mingren_article_url;
            if (categoryid == 36) article_url = putong_article_url;
            if (!article_url) {
                return false;
            }
            $.post(article_url, {
                _token: '{{ csrf_token() }}',
                category_id: categoryid
            }, function (data) {
                if (data.status == 1) {
                    if (categoryid == 21) culture_article_url = data.data.next_page_url;
                    if (categoryid == 22) mingsheng_article_url = data.data.next_page_url;
                    if (categoryid == 20) mingren_article_url = data.data.next_page_url;
                    if (categoryid == 36) putong_article_url = data.data.next_page_url;

                    if (data.data.next_page_url) {
                        $('.more-btn').show();
                    } else {
                        if (culture_article_url == null && mingsheng_article_url == null && mingren_article_url == null && putong_article_url== null) {
                            $('.more-btn').hide();
                        }
                    }

                    var html = '';
                    $.each(data.data.data,function(index,item){
                        
                        var item_html = ''
                        if (categoryid == 21) {
                            item_html = culture_article_html(item);
                        }
                        if (categoryid == 22) {
                            item_html = mingsheng_article_html(item);
                        }
                        if (categoryid == 20) {
                            item_html = mingren_article_html(item);
                        }
                        if (categoryid == 36) {
                            item_html = putong_article_html(index,item);
                        }
                        html += item_html;
                    });

                    if (categoryid == 21) {
                        $('.feiyi').append(html);
                    }
                    if (categoryid == 22) {
                        
                        $('.mingsheng').append(html);
                    }
                    if (categoryid == 20) {
                        $('.mingren').append(html);
                    }
                    if (categoryid == 36) {
                        $('.putong').append(html);
                    }

                } else {

                }
            }, 'json');
        }
        function putong_article_html(index,item){
           if(index>2){return ''}
            if(index==1){
                 html='<a class="adv-item big-item"  href="'+'{{ url('article/details') }}'+'/'+item.id+'">'  
            }else{
                html='<a class="adv-item"  href="'+'{{ url('article/details') }}'+'/'+item.id+'">'
            }
            
            html += '   <div class="adv-img">';
            html += '       <img src="' + item.list_img_url + '" alt="">';
            html += '   </div>';
           
            html += ' <div class="adv-info">';
            html += '       <div class="adv-title">'+item.article_title+'</div>';
            html += '       <div class="adv-intro">'+item.content_into1+'</div>';
               
            html += ' </div>';
            html += ' </a>';
            return html;
        }
        function culture_article_html(item) {
            html = '<a class="article-item" href="'+'{{ url('article/details') }}'+'/'+item.id+'">';
            if (item.list_img_url) {
                html += '   <div class="main-img">';
                html += '       <img src="' + item.list_img_url + '" alt="">';
                html += '   </div>';
            }
            html += '   <div class="a-title">【'+item.region_info.region_name+'】'+item.article_title+'</div>';
            html += '   <div class="a-intro">'+item.content_into+'</div>';
            html += '</a>';
            return html;
        }

        function mingsheng_article_html(item) {
            html = '<div class="ms-item">';
            html += '<a href="'+'{{ url('article/details') }}'+'/'+item.id+'">';
            if (item.imgs_url.length > 0) {
                html += '   <div class="class-imgs">';
                html += '       <div class="a-title">'+item.article_title+'</div>';
                html += '       <div class="a-imgs">';
                $.each(item.imgs_url, function(index, imgs_url_val){
                    if (index < 3) {
                        html += '           <div><img src="'+imgs_url_val+'" alt=""></div>';
                    }
                });
                html += '       </div>';
                html += '   </div>';
            } else {
                html += '   <div class="class-one-img">';
                if (item.list_img_url) {
                    html += '       <div class="a-img left">';
                    html += '           <img src="'+item.list_img_url+'" alt="">';
                    html += '       </div>';
                }
                html += '       <div class="a-title">'+item.article_title+'</div>';
                html += '       <div class="a-intro">'+item.content_into+'</div>';
                html += '       <div class="clear"></div>';
                html += '   </div>';
            }
            html += '</a>';
            html += '   <div class="a-opt">';
            html += '       <div class="tip">景点</div>';
            html += '       <div class="tip-info">【'+item.region_info.region_name+'】</div>';
            html += '       <div class="time">'+item.created_at+'</div>';
            html += '       <div class="right">';
            html += '           <div class="zan">'+item.zan_num+'</div>';
            html += '           <div class="read">'+item.read_num+'</div>';
            html += '       </div>';
            html += '   </div>';
            html += '</div>';

            return html;
        }

        function mingren_article_html(item) {
            html = '<a class="user-item" href="'+'{{ url('article/details') }}'+'/'+item.id+'">';
            html += '   <div class="user-img">';
            if (item.imgs_url[0]) {
                html += '        <img src="'+item.imgs_url[0]+'" alt="">';
            }
            html += '   </div>';
            html += '   <div class="u-title">【'+item.region_info.region_name+'】'+item.article_title+'</div>';
            html += '   <div class="u-intro">'+item.content_into+'</div>';
            html += '</a>';

            return html;
        }

        function article_more() {
           
            article_list(21);
            article_list(22);
            article_list(20);
            article_list(36);
        }

        article_more()
    </script>
@endsection